<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contact</title>

    <!-- 引入font awesome插件链接  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

   <!--  css 链接  -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    
<!-- 导航条开始部分 -->
<nav class="navbar">
    <a href="home.html"> <i class="fas fa-home"></i> <span>主页</span> </a>
    <a href="about.html"> <i class="fas fa-user"></i> <span>相关</span> </a>
    <a href="translation.html"> <i class="fas fa-globe"></i><span>风景</span> </a>
    <a href="place.html"> <i class="fas fa-cheese"></i><span>美食</span> </a>
    <a href="contact.html"> <i class="fas fa-address-book"></i> <span>合同</span> </a>
</nav>

<!-- 导航条 -->

<!-- contact section starts  -->

<section class="contact">

<h1 class="heading"> contact <span>me</span> </h1>

<div class="row">

    <div class="info-container">

        <h1>联系方式</h1>

        <p>你可以通过以下方式联系我，请记得写上您的姓名等向我发送信息。</p>

        <div class="box-container">

            <div class="box">
                <i class="fas fa-map"></i>
                <div class="info">
                    <h3>地址 :</h3>
                    <p>乐山师范学院</p>
                </div>
            </div>

            <div class="box">
                <i class="fas fa-envelope"></i>
                <div class="info">
                    <h3>邮件 :</h3>
                    <p>3423483519@qq.com</p>
                </div>
            </div>

            <div class="box">
                <i class="fas fa-phone"></i>
                <div class="info">
                    <h3>电话 :</h3>
                    <p>1989796959</p>
                </div>
            </div>

        </div>

        <div class="share">
            <a href="#" class="fab fa-qq"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
            <a href="#" class="fab fa-alipay"></a>
        </div>

    </div>

    <form action="">

        <div class="inputBox">
            <input type="text" placeholder="你的名字">
            <input type="number" placeholder="你的电话">
        </div>

        <div class="inputBox">
            <input type="email" placeholder="你的邮件">
            <input type="text" placeholder="你的需求">
        </div>

        <textarea name="" placeholder="短信内容" id="" cols="30" rows="10"></textarea>

        <input type="submit" value="发送消息" class="btn">

    </form>

</div>

</section>



</body>
</html>